<template>
  <view class="healthData">
    <view class="top_canvas">
      <view>
        <view class="box position" v-if="partMsg.id != 0">
          <view>
            {{ partMsg.topName }}
          </view>
          <view>位置</view>
        </view>
        <view class="box position">
          <view>
            {{
              partMsg.id == 0
                ? userYear
                  ? userYear
                  : "-"
                : `${getYear(
                  objData.currentTime
                    ? objData.currentTime
                    : objData.startDate
                )}年`
            }}
          </view>
          <view>已使用</view>
        </view>
      </view>
      <view class="echartsBox" v-show="iscomplete == 1">
        <l-echart class="ring" ref="d1"></l-echart>
        <image :src="ringImg" class="ringBall"></image>
      </view>
      <image class="mainImg" v-if="iscomplete != 1"
        src="https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20240118/a4da11fc19691ba3d3615e926d0a3ea2.png">
      </image>
      <view class="box" v-if="unDisposeCounts" @click="toPitfall(1)">
        <image src="@/static/images/tipjg.png"></image>
        <view>需及时</view>
        <view>处理隐患</view>
      </view>
      <view class="box white" v-else></view>
    </view>
    <view class="content" v-if="partMsg.id != 0">
      <view class="semiCircle">
        <image :src="eleUrl" class="eleUrl"></image>
      </view>
      <view class="contentRight">
        <view v-for="(item, index) in cardList" :key="index" class="card partCard">
          <view class="line"></view>
          <view class="contentRight_top">
            <view>{{ item.label }}</view>
            <view class="score" :style="{
              color:
                item.score <= 75 && item.score > 60
                  ? '#F8AE00'
                  : item.score <= 60
                    ? '#FF375A'
                    : item.score <= 100
                      ? ''
                      : '',
            }">
              {{ item.score || 60 }}
            </view>
          </view>
          <view class="desc">待处理隐患
            <text>
              {{ item.perilous || 0 }}
            </text>
            <uni-icons v-if="item.perilous > 0" type="arrowright" size="16" color="#999999"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    <!-- 整梯的数据展示 -->
    <view class="content allContent" v-else>
      <view v-for="(item, index) in cardList" :key="index" class="card" @click="toPitfall(item.perilous)">
        <view>{{ item.label }}</view>
        <view class="score" :style="{
          color:
            item.score <= 75 && item.score > 60
              ? '#F8AE00'
              : item.score <= 60
                ? '#FF375A'
                : item.score <= 100
                  ? '#6585E4'
                  : '',
        }">
          {{ item.score || 60 }}
        </view>
        <view>待处理隐患</view>
        <view>
          <text>{{ item.perilous || 0 }}</text>
          <uni-icons v-if="item.perilous > 0" type="arrowright" size="16" color="#999999"></uni-icons>
        </view>
      </view>
    </view>
    <view class="list">
      <view class="title">最近状态
        <text>(最近1个月的工单状态)</text>
        <view>
          {{ partMsg.id != 0 ? "维保任务" : "任务" }}
          ({{ elevatorList.length }})
        </view>
      </view>
      <template v-if="partMsg.id != 0">
        <view v-for="(item, index) in elevatorList" :key="index" class="cardItem">
          <view class="time">{{ item.createTime }}</view>
          <view class="line"></view>
          <view class="desc">
            <view class="desc_box">
              <view class="desc_box_content">
                <text class="label">{{ item.checkName }}:</text>
                <view class="record_desc">
                  <text v-if="
                    item.problemItemNames && item.problemItemNames.length > 0
                  ">
                    {{ item.problemItemNames.join(",") }}
                  </text>
                  <text v-if="item.problemItemNames && item.workName">{{
                    ","
                  }}</text>
                  <text>{{ item.workName }}</text>
                </view>
              </view>
            </view>
            <view class="desc_box" v-if="item.typeStatus == 1">
              <view class="desc_box_content">
                <text class="label">保养结果:</text>
                <view class="record_desc">
                  <text v-if="item.result != null" :style="{ color: item.result == 1 ? '#6BC013' : '#E02020' }">
                    {{ item.result == 1 ? "正常" : "异常" }}</text>
                  <template v-else>
                    <text class="record_desc" v-for="(i, k) in item.recordData.options" :key="k"
                      :style="{ color: i.result == 1 ? '#6BC013' : '#E02020' }">
                      <template v-if="i.default">{{ i.name }}</template>
                    </text>
                  </template>
                </view>
              </view>
            </view>
            <view class="desc_box" v-if="item.disposeDesc">
              <view class="desc_box_content">
                <text class="label">{{ partLabelList[item.typeStatus - 1].title }}:</text>
                <text class="record_desc">{{ item.disposeDesc }}</text>
              </view>
            </view>
            <view class="desc_box" v-if="item.disposeImgUrl">
              <view class="imgBox">
                <image v-for="(i, j) in item.disposeImgUrl" :key="j"
                  :src="i.type == 'image' ? i.url : '/static/images/video.png'"
                  @click.stop="preViewFile(item.disposeImgUrl, j)">
                </image>
              </view>
            </view>
            <view class="desc_box" v-if="item.typeStatus == 1 && item.recordDataValues">
              <view class="record" v-for="(it, k) in item.recordDataValues" :key="k" :style="{
                borderBottom:
                  k == item.recordDataValues.length - 1 ? '0' : '',
              }">
                <view class="desc_box_content">
                  <text class="label">{{
                    item.recordDataValues.length == 1
                      ? "记录"
                      : "记录" + (k + 1)
                  }}:</text>
                  <text class="record_desc">{{ it.remarks.val }}</text>
                </view>
                <view class="imgBox">
                  <image v-for="(i, j) in it.files.val" :key="j" :src="i.type == 'image' ? i.url : '/static/images/video.png'
                    " @click.stop="preViewFile(it.files.val, j)">
                  </image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-else>
        <eleItem-list :isListSty="true" v-for="(e, i) in elevatorList" :key="i" :item="e" :tabIdx="e.typeStatus - 1"
          :typeIdx="iscomplete" :childIdx="i" :elevatorId="elevatorId" @update="restList()" @userMore="handleUserMore">
        </eleItem-list>
      </template>
      <view class="none-block" v-if="elevatorList.length == 0">
        <view class="img">
          <image src="@/static/images/default.png"></image>
        </view>
        <view class="text">- 暂无相关数据 -</view>
      </view>
    </view>
  </view>
</template>
<script>
import * as echarts from '@/subpages/components/echarts';
import '@/subpages/components/echarts-liquidfill/src/liquidFill.js';
import { getElevatorFoundation } from '@/apis/elevator.js';
import { getElevatorHealthInfo } from '@/apis/elevator.js';
// import OrderList from '../components/eleOrderList.vue';
import { liquidFill } from '@/utils/chart_opt.js';
import { getDiffYear } from '@/utils/tools.js';
import LEchart from '@/subpages/components/lime-echart/components/l-echart/l-echart.vue';
import eleItemList from './eleItemList.vue';
export default {
  components: {
    LEchart,
    // OrderList,
    eleItemList,
  },
  onReady() {
    // console.log(echarts.version);
    this.initData();
  },
  props: {
    elevatorId: {
      type: String,
    },
    partMsg: {
      type: Object,
      default: () => {
        return {};
      },
    },
    flagMsg: {
      type: Object,
      default: () => {
        return {};
      },
    },
    eleMsg: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    partMsg() {
      this.initData();
    },
  },
  // #ifdef H5
  mounted() {
    this.initData();
  },
  // #endif
  computed: {
    // 零部件2.5D图
    eleUrl() {
      if (this.partMsg.id != 0) {
        if (this.partMsg.routeNmae.indexOf('机房') != -1) {
          return 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/b24cf08b0405466c07706bb1dbc9ebdb.png';
        } else if (this.partMsg.routeNmae.indexOf('层站') != -1) {
          return 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/f73390d25b557f686bc9cefc706db3ff.png';
        } else if (this.partMsg.routeNmae.indexOf('轿厢') != -1) {
          return 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/9e85df21b8c7761c8a18a90db804c7d7.png';
        } else if (this.partMsg.routeNmae.indexOf('/底坑') != -1) {
          return 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/955f3f075bf7dfdd8f3b1788e0c9f68c.png';
        } else if (this.partMsg.routeNmae.indexOf('/井道') != -1) {
          return 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/422145f8d9f6fb43e32e590aa4c8068f.png';
        } else {
          return 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231108/ea804eac0900e9b5108a27afb85fbe8c.png';
        }
      }
      // 添加默认值
      return '';
    },
    // 环绕小球
    ringImg() {
      let ringImg = '';
      // 中
      if (this.healthScore <= 75 && this.healthScore > 60) {
        ringImg = 'https://000000-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20250722/36f442def0a99cbce0ec8d3ebcb7a394.png';
        // 下
      } else if (this.healthScore <= 60) {
        ringImg = 'https://000000-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20250722/b752bc4dfe9ebe775aaab5c7de3fa19a.png';
      } else {
        ringImg = 'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/388475/MGzbBOfYAI4U51f90a6f9e3f2ef7f8dd786e3a4e1f35.png';
      }
      return ringImg;
    },
  },
  data() {
    return {
      // 是否为已完成工单
      iscomplete: '',
      // 健康分
      healthScore: '',
      // 使用年限
      userYear: '',
      // 总待处理
      unDisposeCounts: '',
      // 隐患
      cardList: [
        {
          perilous: 0,
          key: 'faceScore',
          label: '外观/清洁',
          score: 0,
        },
        {
          // 隐患
          perilous: 0,
          key: 'functionalScore',
          label: '功能/调整',
          score: 0,
        },
        {
          // 隐患
          perilous: 0,
          key: 'lubricatingScore',
          label: '润滑',
          score: 0,
        },
        {
          // 隐患
          perilous: 0,
          key: 'measurementScore',
          label: '测量',
          score: 0,
        },
      ],
      d1: {
        colors: ['#F47D99', '#6FA9FF'],
        colorsCopy: ['#F47D99', '#6FA9FF'],
        count: 0,
        toopDesc: true,
        linedata: {
          categories: [],
          series: [],
        },
        chartData: {
          series: [],
        },
        // tooltip状态
        tooplState1: false,
        // 返回按钮
        toopText1: false,
        desc: false,
        toolObj1: {},
        value1: '',
        value2: '',
      },
      elevatorList: [],
      partLabelList: [
        {
          title: '保养记录',
        },
        {
          title: '维修记录',
        },
        {},
        {
          title: '维修记录',
        },
      ],
      objData: {},
    };
  },
  methods: {
    // 绘制水球图
    setRingChart(chart, data) {
      if (!this.$refs[chart]) {
        return;
      } else {
        this.$refs[chart].dispose();
      }
      this[chart].opts = liquidFill(data);
      this.$nextTick(() => {
        this.$refs[chart].init(echarts, (chartF) => {
          chartF.setOption(this[chart].opts, true);
          uni.hideLoading();
        });
      });
    },
    initData() {
      this.elevatorList = [];
      uni.showLoading({
        title: '加载中',
        mask: true,
      });
      getElevatorHealthInfo({
        // '1000000000000000120',//
        elevatorId: this.elevatorId,
        partId: this.partMsg.id == 0 ? '' : this.partMsg.id,
        floorStandIds: this.flagMsg.id ? this.flagMsg.id : '',
      }).then((res) => {
        let {
          healthScore,
          unDisposeCounts,
          status,
          userYear,
          list,
          workVoList,
        } = res.data;
        this.healthScore = healthScore;
        this.unDisposeCounts = unDisposeCounts;
        this.userYear = userYear;
        this.iscomplete = status;
        if (this.partMsg.id == 0) {
          this.elevatorList = list;
        } else {
          this.elevatorList = workVoList;
        }
        this.elevatorList.forEach((item) => {
          if (item.partName) {
            let name = item.partName.replaceAll('&amp;&amp;', '/');
            item.partName = name.slice(name.lastIndexOf('/') + 1);
          }
        });
        for (const key in res.data) {
          this.cardList.forEach((item) => {
            if (key == item.key) {
              item.score = res.data[key];
              item.perilous = res.data[key + 'Counts'];
            }
          });
        }
        if (this.partMsg.id != 0) {
          getElevatorFoundation({
            partId: this.partMsg.id,
            elevatorId: this.elevatorId,
            floorStandIds: this.flagMsg.id ? this.flagMsg.id : '',
          }).then((data) => {
            if (data.code === 200) {
              this.objData = data.data || {};
            }
          });
        }
        if (status == 1) {
          this.setRingChart('d1', { healthScore, unDisposeCounts, status });
        } else {
          uni.hideLoading();
        }
      });
    },
    handleUserMore(res) {
      const { parentIdx, val } = res;
      this.elevatorList[parentIdx].usermore = val;
    },
    // 计算年限
    getYear(d) {
      return d ? getDiffYear(d) : '-';
    },
    // 预览
    preViewFile(list, index) {
      console.log('预览照片', list, index);
      wx.previewMedia({
        sources: list,
        current: index,
      });
    },
    // 整梯隐患
    toPitfall(e) {
      if (e == 0) return;
      uni.setStorageSync('pitfall', {
        eleMsg: this.eleMsg,
      });
      uni.navigateTo({
        url: '/pageModules/projectInfo/componentsDetail/pitfall',
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@keyframes ring {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.healthData {
  background-color: #f3f6f8;
  padding-bottom: 60rpx;

  .top_canvas {
    background-color: #fff;
    padding: 20rpx;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .box {
      background: #f6f8fc;
      border-radius: 16rpx;
      width: 100rpx;
      padding: 10rpx 8rpx;
      font-size: 24rpx;
      text-align: center;
      color: #666666;

      image {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .position {
      margin-bottom: 20rpx;
      height: 100rpx;
      box-sizing: border-box;

      view:nth-child(1) {
        color: #0091ff;
        font-size: 28rpx;
        font-weight: 500;
        margin-top: 12rpx;
        margin-bottom: 4rpx;
      }

      view:nth-child(2) {
        font-size: 20rpx;
      }
    }

    .white {
      background: #fff;
    }

    .echartsBox {
      width: 352rpx;
      height: 352rpx;
      position: relative;
    }

    .mainImg {
      width: 316rpx;
      height: 288rpx
    }

    .ringBall {
      width: 352rpx;
      height: 352rpx;
      position: absolute;
      left: 0;
      top: 0;
      animation: ring 10s linear infinite;
    }
  }

  .content {
    display: flex;
    padding: 20rpx 0;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 0px 0px 32rpx 32rpx;

    .semiCircle {
      width: 310rpx;
      height: 620rpx;
      background: transparent url("https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231108/cbf726cfbda2f6bf9f81b03789e87429.png") no-repeat center;
      background-size: 100%;

      .eleUrl {
        width: 220rpx;
        height: 642rpx;
        margin-left: 40rpx;
      }
    }

    .contentRight {
      width: 50%;

      .contentRight_top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        view:nth-child(1) {
          font-size: 28rpx;
        }
      }

      .desc {
        display: flex;
        align-items: center;

        .desc_box {
          .desc_box_content {
            display: flex;
            align-items: flex-start;
          }

          .imgBox {
            margin: 10rpx 0
          }

        }

        text:nth-child(1) {
          font-size: 28rpx;
          margin-left: 20rpx;
          margin-right: 10rpx;
        }
      }
    }

    .card {
      padding: 20rpx 10rpx;
      width: 140rpx;
      height: 200rpx;
      background: #f6f8fc;
      border-radius: 24rpx;
      font-size: 24rpx;
      color: #666;
      text-align: center;

      .score {
        font-size: 48rpx;
        color: #6585e4;
        font-weight: 700;
        margin: 10rpx 0;
      }
    }

    .partCard {
      width: 100%;
      box-sizing: border-box;
      // width: 376rpx;
      height: 138rpx;
      text-align: left;
      padding: 10rpx 20rpx;
      margin-bottom: 20rpx;
      border-radius: 24rpx 0px 0px 24rpx !important;
      position: relative;

      .line {
        width: 8rpx;
        height: 138rpx;
        background: #6585e4;
        border-radius: 24rpx 0px 0px 24rpx;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }

  .allContent {
    padding: 20rpx;
    font-size: 28rpx;

    view :nth-last-child(1) {
      text-align: center;
    }
  }

  .list {
    padding: 20rpx;

    .title {
      font-size: 28rpx;
      color: #333333;
      font-weight: bold;

      text {
        color: #999999;
        font-size: 24rpx;
        font-weight: normal;
      }

      view {
        color: #666666;
        font-weight: normal;
        font-size: 26rpx;
        margin-top: 20rpx;
      }
    }

    .cardItem {
      background: #fff;
      margin-top: 10rpx;
      margin-bottom: 30rpx;
      border-radius: 8rpx;
      box-shadow: 0px 2rpx 18rpx 0px rgba(0, 0, 0, 0.07);
      padding: 20rpx 0;

      .time {
        color: #999999;
        font-size: 24rpx;
        padding-left: 20rpx;
      }

      .line {
        margin: 20rpx 0;
        width: 100%;
        height: 2rpx;
        background: #eee;
      }

      .desc {
        padding: 0 20rpx;

        &_box {
          font-size: 26rpx;
          color: #666;
          margin: 20rpx 0;

          .record {
            margin-top: 10rpx;
            border-bottom: 2rpx solid #eee;
          }

          image {
            width: 112rpx;
            height: 112rpx;
            margin-right: 20rpx;
          }

          .label {
            width: 140rpx;
          }

          .record_desc {
            width: calc(100% - 140rpx);
          }
        }
      }
    }

    .none-block {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      height: 250rpx;
      padding-top: 120rpx;

      .img {
        image {
          width: 64rpx;
          height: 64rpx;
        }
      }

      .text {
        width: 100%;
        color: #999999;
        font-size: 26rpx;
      }
    }
  }
}
</style>
